<template>
	<view class="sport_card" @click="goMethod">
		<text class="big_title">{{props.title}}</text>
	</view>
</template>

<script lang="ts" setup>
	const props = defineProps(["navigateUrl","back_url","title","width","height"])
	let back_url = `url("${props.back_url}")` 
	let backImg_width = props.width + ' ' + props.height
	const goMethod = () => {
		console.log('我去了这里',props.navigateUrl);
		uni.navigateTo({
			url:props.navigateUrl,
		})
	}
</script>

<style>
	.sport_card{
		width: v-bind(props.width) ;
		height: v-bind(props.height)  ;
		background-image: v-bind(back_url);
		background-size:  v-bind(backImg_width);
		background-repeat: no-repeat;
		border-radius: 1vw;
		text-align: center;
	}
	.big_title{
		color: #fff;
		padding: 1vh  2vw;
		box-sizing: border-box;
		border-radius: 0 0 1vw  1vw;
		background-color: #09c0ed;
	}
</style>